Interacciones dinámicas. Código de interacción. Optimización y accesibilidad.
Sección dos
Estilos CSS Parte 3.
Posicionamiento y Layout.
Flexbox y Grid.
Instrucciones y Ejercicios:
Convertir todas las unidades en px (pixel) a rem
Guìa comentadas en el archivo estilos.css. Cada "EJERCICIO" numerado pedirá descomentar o añadir cierto código CSS para ver el efecto.
Ejercicio 1: Estilos Base y Reset Mínimo
Abrir index.html en el navegador. Verás una lista con viñetas. En estilos.css, descomentar (o escribe si no está) el código bajo
/* ----- EJERCICIO 1: Estilos Base y Reset Mínimo ----- */.
Guardar estilos.css y actualizar el navegador.
Observar: Los puntos de la lista desaparecen, los elementos se alinean horizontalmente y se centran, y los enlaces ya no tienen subrayado.
El header tiene un fondo y es "pegajoso".
Ejercicio 2: Efecto Hover Básico
En estilos.css, descomenta el código bajo
/* ----- EJERCICIO 2: Efecto Hover Básico ----- */.
Guardar y actualizar.
Observar: Al pasar el mouse sobre los enlaces del menú, el color de fondo y el color del texto cambian.
Ejercicio 3: Bordes y Separadores
Aquí hay dos opciones, probar una o ambas (comentando la otra):
Opción A:
Descomentar la línea
/* border-bottom: 3px solid #ffc107; */
dentro de la regla :hover del ejercicio anterior.
Esto añade un borde inferior al pasar el mouse.
Opción B:
Descomentar el bloque
/* .menu-principal ul li:not(:last-child) { ... } */.
Esto añade una línea vertical entre los elementos del menú.
Guardar y actualizar para ver cada efecto.
Ejercicio 4: Transiciones Suaves
En estilos.css, localizar la regla .menu-principal ul li a (la original, no la de :hover). Añadir (o descomentar si ya se aactivo) la propiedad
transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease-out;.
Localizar la regla
.menu-principal ul li a:hover y añadir (o descomentar)
transform: translateY(-3px);.
Guardar ambos archivos y actualizar.
Observar: Los cambios de color al hacer hover ahora son animados y suaves. Además, los ítems del menú se elevan ligeramente.
Ejercicio 5: Elemento Activo
En el archivo index.html, modificar uno de los enlaces para que tenga la clase activo.
Por ejemplo:
.
En estilos.css, descomentar el bloque
/* ----- EJERCICIO 5: Elemento Activo ----- */.
Guardar ambos archivos y actualizar.
Observar: El elemento del menú al que le añadiste la clase activo ahora tiene un estilo diferente, indicando que es la sección actual.
Ejercicio 6: Variante - Menú Vertical
Para probar esto, primero comentar los estilos que hacen el menú horizontal:
En .menu-principal ul li, comentar
display: inline-block;.
En .menu-principal ul, comentar
text-align: center;.
Luego, en estilos.css, cambiar el nombre de la clase en el HTML de menu-principal a menu-principal-vertical (o simplemente aplicar los estilos de
.menu-principal-vertical a .menu-principal en el CSS).
Descomentar el bloque
/* ----- EJERCICIO 6: Variante - Menú Vertical ----- */.
Guardar y actualizar.
Observar: El menú ahora se muestra verticalmente. Se puede ajustar el padding-left en ul o el width del